import { Component } from 'solid-js';
import { A } from '@solidjs/router';

export interface AppCardProps {
  category: string;
  pkgname: string;
  name: string;
  description: string;
  icon?: string;
}

const AppCard: Component<AppCardProps> = (props) => {
  return (
    <A
      href={`/app/${props.category}/${props.pkgname}`}
      class="block p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors"
    >
      <div class="flex items-center gap-3 h-full">
        <div class="w-12 h-12 rounded-lg bg-muted flex items-center justify-center overflow-hidden">
          {props.icon ? (
            <img src={props.icon} alt={props.name} class="w-full h-full object-cover" />
          ) : (
            <div class="text-2xl font-bold text-muted-foreground">
              {props.name.charAt(0)}
            </div>
          )}
        </div>
        <div class="flex-1 min-w-0">
          <div class="flex items-center justify-between gap-2">
            <h3 class="font-medium text-base truncate">{props.name}</h3>
          </div>
          <p class="mt-1 text-sm text-muted-foreground line-clamp-2">
            {props.description}
          </p>
        </div>
      </div>
    </A>
  );
};

export default AppCard;